import React, { Component } from 'react';
// 引入组件
import { CSSTransition, TransitionGroup } from 'react-transition-group'
// 引入样式
import './css3.css'
class Csstransition3 extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { id: 1, text: 'Buy eggs' },
        { id: 2, text: 'Pay bills' },
        { id: 3, text: 'Invite friends over' },
        { id: 4, text: 'Fix the TV' },
      ]
    }
  }
  del(index) {
    let arr = this.state.list;
    arr.splice(index, 1);
    this.setState({
      list: arr
    })
  }
  render() {
    return (
      <div>
        <TransitionGroup className="todo-list">
          {
            this.state.list.map((item, index) => {
              return (
                <CSSTransition key={index} timeout={500} classNames="item">
                  <div>
                    <button onClick={()=>this.del(index)}>x</button>
                    <span>{item.text}</span>
                  </div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
      </div>
    );
  }
}

export default Csstransition3;
